<template>
  <s-page custom-class="NavBar-Page">
    <s-nav-bar
      :back="back"
      :back-text="backText"
      title="NavBar"
      :title-align="titleAlign"
      :background="background"
      color="white"
      :custom-back="customBack ? handleBack : undefined"
    />

    <view class="container">
      <c-demo-block title="背景色">
        <s-tabs
          v-model="background"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '渐变色', value: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))' },
            { label: '#39CCCC', value: '#39CCCC' },
            { label: '#001f3f', value: '#001f3f' },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="标题位置">
        <s-tabs
          v-model="titleAlign"
          value-key="value"
          :show-line="false"
          :list="[
            { label: '居中', value: 'center' },
            { label: '居左', value: 'left' },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="显示返回功能">
        <s-tabs
          v-model="back"
          :show-line="false"
          value-key="value"
          :list="[
            { label: '否', value: false },
            { label: '是', value: true },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="返回按钮文字">
        <s-tabs
          v-model="backText"
          :show-line="false"
          value-key="value"
          :list="[
            { label: '无', value: '' },
            { label: '返回', value: '返回' },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="自定义返回事件">
        <s-tabs
          v-model="customBack"
          :show-line="false"
          value-key="value"
          :list="[
            { label: '否', value: false },
            { label: '是', value: true },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="透明渐变导航">
        <view style="padding: 0 32rpx">
          <s-button type="primary" plain block @click="jumpToTransparentNav">跳转预览</s-button>
        </view>
      </c-demo-block>

      <c-demo-block title="left插槽">
        <s-nav-bar :fixed="false" :status-bar="false" :right-menu-button="false" title="标题">
          <view slot="left">left</view>
        </s-nav-bar>
      </c-demo-block>

      <c-demo-block title="right插槽">
        <s-nav-bar :fixed="false" :status-bar="false" :right-menu-button="false" title="标题">
          <view slot="right">right</view>
        </s-nav-bar>
      </c-demo-block>

      <c-demo-block title="title插槽">
        <s-nav-bar :fixed="false" :status-bar="false" :right-menu-button="false">
          <view slot="title" style="color: red">标题</view>
        </s-nav-bar>
      </c-demo-block>

      <c-demo-block title="back插槽">
        <s-nav-bar :fixed="false" :status-bar="false" :right-menu-button="false" back title="标题">
          <s-button
            slot="back"
            type="text"
            shape="circle"
            icon="arrow-left"
            icon-size="18px"
            custom-style="width:32px;height:32px;background:rgba(0,0,0,0.2);padding:0;"
          />
        </s-nav-bar>
      </c-demo-block>

      <c-demo-block title="center插槽">
        <s-nav-bar :fixed="false" :status-bar="false" :right-menu-button="false">
          <view slot="center" style="flex: 1; text-align: center">center</view>
        </s-nav-bar>
      </c-demo-block>

      <c-demo-block title="default插槽">
        <s-nav-bar :fixed="false" :status-bar="false" :right-menu-button="false">
          <s-search height="100%" placeholder="搜索" disabled padding="6px 10px" background="none" shape="round" />
        </s-nav-bar>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    backText: '',
    titleAlign: 'center',
    background: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
    back: true,
    customBack: false,
  }),
  methods: {
    handleBack() {
      uni.showToast('自定义返回事件');
    },
    jumpToTransparentNav() {
      uni.navigateTo({ url: '/pages/nav/navBar/transparentNav' });
    },
  },
};
</script>

<style lang="scss">
.NavBar-Page {
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
